<!-- 排行榜的数据列表 -->
<template>
  <div>
    <a-config-provider>
      <template v-if="data.length === 0" #renderEmpty>
        <a-empty :description="false" />
        <p>暂无文章</p>
<!--         <a-icon type="frown" style="font-size: 20px;" />
        <p>暂无文章</p> -->
      </template>
      <a-list item-layout="horizontal" :data-source="data" :loading="loading">
        <a-list-item slot="renderItem" slot-scope="item, index">
          <a-list-item-meta :description="'作者：'+ item.author">
            <a
              slot="title"
              :title="item.title"
              @click="getDetails(item.id)"
              target="_blank"
              >{{ item.title }}</a
            >
          </a-list-item-meta>
          <div>浏览 {{ item.view > 9999 ? "9999+" : item.view }}</div>
        </a-list-item>
      </a-list>
    </a-config-provider>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

import { homeArticleList } from "@/apis/article";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      data: [],
      time: [],
      collection: [],
      praise: [],
      listType: this.type,
      loading: false,
    };
  },
  props: {
    type: {
      type: String,
      default: "comment",
    },
  },
  // 监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    type(newValue, oldValue) {
      if (newValue === "time") this.data = this.time;
      if (newValue === "collection") this.data = this.collection;
      if (newValue === "praise") this.data = this.praise;
    },
  },
  //方法集合
  methods: {
    getLeaderBoard() {
      this.loading = true;
      homeArticleList().then((res) => {
        this.time = res.data.time;
        this.collection = res.data.collection;
        this.praise = res.data.praise;
        if (this.listType === "time") this.data = this.time;
        if (this.listType === "collection") this.data = this.collection;
        if (this.listType === "praise") this.data = this.praise;
        this.loading = false;
      });
    },
    getDetails(id) {
      this.$router.push("/Details/"+id);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getLeaderBoard();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
.ant-list-item-meta-title {
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
//@import url(); 引入公共css类
</style>
